<template>
  <div>
    <el-form inline>
    <el-form-item label="一级分类">
      <el-select v-model="category1Id" placeholder="请选择" @change="changeCategory1Id" :disabled="isDisabled">
        <el-option :label="c1.name" :value="c1.id" v-for="(c1,index) in category1List" :key="c1.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
      <el-select v-model="category2Id" placeholder="请选择" @change="changeCategory2Id" :disabled="isDisabled">
        <el-option :label="c2.name" :value="c2.id" v-for="(c2,index) in category2List" :key="c2.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="三级分类">
      <el-select v-model="category3Id" placeholder="请选择" @change="changeCategory3Id" :disabled="isDisabled">
        <el-option :label="c3.name" :value="c3.id" v-for="(c3,index) in category3List" :key="c3.id"></el-option>
      </el-select>
    </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "CategorySelector",
  data() {
    return {
      category1Id: "",//一级分类的id
      category2Id: "",//二级分类的id
      category3Id: "",//三级分类的id
      category1List: [],//一级分类列表
      category2List: [],//二级分类列表
      category3List: [],//三级分类列表
      isDisabled:false, // 商品分类是否禁用
    };
  },

  mounted() {
    this.getCategory1List();
  },
  methods: {
    // 获取一级分类的菜单列表
    async getCategory1List() {
      let result = await this.$API.category.getCategory1();
      if (result.code == 200) {
        this.category1List = result.data;
      }
    },
    // 获取二级分类的菜单列表 参数为改变后的value
    async changeCategory1Id(categoryId){
      // 存储一级分类的id
      // this.category1Id = categoryId;
      // 置空二级分类和三级分类
      this.category2Id= "";//二级分类的id
      this.category3Id= "";//三级分类的id
      this.category2List= [];//二级分类列表
      this.category3List=[];//三级分类列表
      // 分发自定义事件,告诉父级组件,当前的级别标识和此时的分类id
      this.$emit('changeCategoryId',{level:1,categoryId})
      // 调用api 接口获取二级分类的数据
      let result = await this.$API.category.getCategory2(categoryId);
      if(result.code == 200){
        this.category2List = result.data;
      }
    },
    // 获取三级分类的菜单列表 参数为改变后的value
    async changeCategory2Id(categoryId){
      // 存储一级分类的id
      // this.category2Id = categoryId;
      // 置空二级分类和三级分类
      this.category3Id= "";//三级分类的id
      this.category3List=[];//三级分类列表
      // 分发自定义事件,告诉父级组件,当前的级别标识和此时的分类id
      this.$emit('changeCategoryId',{level:2,categoryId})
      // 调用api 接口获取二级分类的数据
      let result = await this.$API.category.getCategory3(categoryId);
      if(result.code == 200){
        this.category3List = result.data;
      }
    },
    // 改变三级分类的选项的时候
    async changeCategory3Id(categoryId){
      // 分发自定义事件,告诉父级组件,当前的级别标识和此时的分类id
      this.$emit('changeCategoryId',{level:3,categoryId})
    },
  },
};
</script>

<style scoped>
</style>